<template>
	<!-- 头部区域 -->
	<view class="headBg" v-if="is_login">
		<text class="username">{{userInfo.systemUserName}}</text>
	</view>
	<view class="headBg login-prompt" v-else @touchend="to_login">
		<text class="prompt-text">立即登录，开启学习之旅</text>
		<text class="arrow-icon">→</text>
	</view>

	<!-- 课程信息卡 -->
	<view class="class-card">
		<view class="info-item">
			<text class="label">累计课时</text>
			<text class="value success">{{totalHours}}课时</text>
		</view>
		<view class="info-item">
			<text class="label">剩余课时</text>
			<text class="value warning">{{remainingHours}}课时</text>
		</view>
	</view>

	<!-- 课程记录列表 -->
	<scroll-view scroll-y="true" class="scroll" @scrolltolower="getCourseRecord">
		<view class="course-list">
			<view class="course-item" v-for="(item, index) in courseList" :key="index">
				<view class="course-header">
					<text class="course-title">{{item.courseName}}</text>
					<text class="course-time">{{item.schoolTime}}</text>
				</view>
				<view class="course-content">
					<text class="section-title">课程内容：</text>
					<text class="content-text">{{item.content}}</text>
				</view>
				<view class="course-homework">
					<text class="section-title">课程作业：</text>
					<text class="homework-text">{{item.job}}</text>
				</view>
			</view>

			<!-- 加载状态 -->
			<view v-if="loading" class="loading-text">
				<uni-load-more :status="loading ? 'loading' : 'noMore'" />
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
import { ref } from "vue"
import { onShow } from '@dcloudio/uni-app'
import { http } from "@/utils/http.js"

// 登录状态管理
const is_login = ref(false)
const userInfo = ref({})
const totalHours = ref(0)
const remainingHours = ref(0)

// 课程列表数据
const courseList = ref([])
const loading = ref(false)
const finished = ref(false)
const page = ref(1)
const pageSize = 5

// 登录跳转
const to_login = () => {
	uni.navigateTo({
		url: "/pages/login/login"
	})
}

// 获取课程记录
const getCourseRecord = async () => {
	if (loading.value || finished.value) return
	
	loading.value = true
	try {
		const res = await http({
			url: "/courseRecord/byStudentId",
			method: "get",
			params: {
				studentId: userInfo.value.id,
				page: page.value,
				pageSize: pageSize
			}
		})

		if (res.data.length === 0) {
			finished.value = true
			return
		}
		console.log(res)
		// 更新课时统计（根据实际接口字段调整）
		totalHours.value = res.data.total || totalHours.value

		courseList.value = [...courseList.value, ...res.data.list]
		if(res.data.list.length > 0){
				page.value++
		}
	} catch (error) {
		uni.showToast({
			title: '课程加载失败',
			icon: 'none'
		})
	} finally {
		loading.value = false
	}
}

// 页面加载生命周期
onShow(() => {
	const storageInfo = uni.getStorageSync("userInfo")
	if (storageInfo) {
		userInfo.value = JSON.parse(storageInfo)
		is_login.value = true
		getCourseRecord()
		http({
			url: '/course/getAllTotalLessons',
			method: 'get',
			params: {
				studentId: userInfo.value.id
			}
		}).then(res => {
			remainingHours.value = res.data || remainingHours.value
		})
	}
})
</script>

<style lang="scss" scoped>
	
.scroll{
	height: 70vh;
}
/* 基础样式重置 */
page {
	background: #f5f7fa;
}

/* 头部样式 */
.headBg {
	position: relative;
	height: 280rpx;
	padding: 40rpx;
	background: linear-gradient(135deg, #ff9a44, #ff6b6b);
	box-shadow: 0 8rpx 24rpx rgba(255, 107, 107, 0.3);
	display: flex;
	align-items: center;

	&.login-prompt {
		justify-content: center;
		.prompt-text {
			font-size: 36rpx;
			color: #fff;
			text-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
			margin-right: 16rpx;
		}
		.arrow-icon {
			font-size: 48rpx;
			color: rgba(255,255,255,0.8);
		}
	}

	.username {
		font-size: 40rpx;
		color: #fff;
		font-weight: 600;
		text-shadow: 0 4rpx 12rpx rgba(0,0,0,0.15);
		text-align: center;
		width: 100%;
	}
}

/* 课程信息卡 */
.class-card {
	margin: -80rpx 20rpx 0;
	padding: 32rpx;
	background: #fff;
	border-radius: 24rpx;
	box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.05);
	display: flex;
	transform: translateY(-40rpx);

	.info-item {
		flex: 1;
		text-align: center;

		.label {
			display: block;
			color: #909399;
			font-size: 24rpx;
			margin-bottom: 8rpx;
		}
		.value {
			font-size: 36rpx;
			font-weight: 500;

			&.success { color: #67c23a; }
			&.warning { color: #e6a23c; }
		}
	}
}

/* 课程记录列表 */
.course-list {
	padding: 0 20rpx;

	.course-item {
		margin-bottom: 24rpx;
		padding: 32rpx;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.03);
		transition: transform 0.2s;

		&:active {
			transform: scale(0.98);
		}

		.course-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;
			padding-bottom: 24rpx;
			border-bottom: 1rpx solid #ebeef5;

			.course-title {
				font-size: 34rpx;
				font-weight: 500;
				color: #303133;
			}
			.course-time {
				font-size: 24rpx;
				color: #909399;
			}
		}

		.course-content,
		.course-homework {
			margin-top: 20rpx;

			.section-title {
				display: block;
				color: #606266;
				font-size: 28rpx;
				margin-bottom: 12rpx;
			}
			.content-text,
			.homework-text {
				font-size: 28rpx;
				color: #303133;
				line-height: 1.6;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	.loading-text {
		padding: 24rpx 0;
		text-align: center;
		color: #909399;
		font-size: 24rpx;
	}
}
</style>